@charset "UTF-8"; /*声明 CSS 文件编码格式的语句*/
body {
    display: flex;
/ 弹性布局 / font-family: "Open Sans", sans-serif;
    height: 100vh;
    background-size: cover;
    overflow: hidden;
    background-color: #2681d1;
    background-image: radial-gradient(closest-side, rgba(41, 217, 182, 1), rgba(41, 217, 182, 0)),
    radial-gradient(closest-side, rgba(41, 215, 217, 1), rgba(41, 215, 217, 0)),
    radial-gradient(closest-side, rgba(41, 195, 217, 1), rgba(41, 195, 217, 0)),
    radial-gradient(closest-side, rgba(38, 117, 209, 1), rgba(38, 117, 209, 0)),
    radial-gradient(closest-side, rgba(38, 95, 209, 1), rgba(38, 95, 209, 0));
    background-size: 130vmax 130vmax,
    80vmax 80vmax,
    90vmax 90vmax,
    110vmax 110vmax,
    90vmax 90vmax;
    background-position: -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 10vmax,
    -30vmax -10vmax,
    50vmax 50vmax;
    background-repeat: no-repeat;
    animation: 7s movement linear infinite;
}

/*"body::after" 用于创建一个虚拟元素，以覆盖整个页面，并用渐变效果来改变背景颜色。 */
body::after {
    content: '';
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* 实现高斯模糊效果 */
}

@keyframes movement {
    0%, 100% {
        background-size: 130vmax 130vmax,
        80vmax 80vmax,
        90vmax 90vmax,
        110vmax 110vmax,
        90vmax 90vmax;
        background-position: -80vmax -80vmax,
        60vmax -30vmax,
        10vmax 10vmax,
        -30vmax -10vmax,
        50vmax 50vmax;
    }
    25% {
        background-size: 100vmax 100vmax,
        90vmax 90vmax,
        100vmax 100vmax,
        90vmax 90vmax,
        60vmax 60vmax;
        background-position: -60vmax -90vmax,
        50vmax -40vmax,
        0vmax -20vmax,
        -40vmax -20vmax,
        40vmax 60vmax;
    }
    50% {
        background-size: 80vmax 80vmax,
        110vmax 110vmax,
        80vmax 80vmax,
        60vmax 60vmax,
        80vmax 80vmax;
        background-position: -50vmax -70vmax,
        40vmax -30vmax,
        10vmax 0vmax,
        20vmax 10vmax,
        30vmax 70vmax;
    }
    75% {
        background-size: 90vmax 90vmax,
        90vmax 90vmax,
        100vmax 100vmax,
        90vmax 90vmax,
        70vmax 70vmax;
        background-position: -50vmax -40vmax,
        50vmax -30vmax,
        20vmax 0vmax,
        -10vmax 10vmax,
        40vmax 60vmax;
    }
}

/* 设置的边框和内边距的值是包含在 width 内的， width 和 height 属性包括内容，内边距和边框，但不包括外边距 */
* {
    box-sizing: border-box;
}

header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    z-index: 10;
    position: fixed;
    /*不会受到页面滚动的影响 *将位置设为"fixed"可使元素相对于视窗进行定位*!*/
    top: 2.5vh;
    left: 2vw;
    width: 100%;
    height: 10vh;
    /*vh表示视口高度的百分比，因此100vh将使元素的高度等于浏览器窗口高度（视口）*/
    background: rgba(255, 255, 255, 0);
}

header img {
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    width: 20%;
    /*将图像宽度设置为其父元素（<header>）宽度的20％*/
    /*vw表示相对于视口宽度的百分比，即1vw等于视口宽度的1%.*/
    /*%表示相对于父元素的百分比，即1%等于父元素宽度的1%。*/
}

header .logo h6 {
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    font-size: 1.2vw;
    line-height: 4vh;
    text-align: center;
    margin-left: 1vw;
    margin-right: 1vw;
    background-color: rgba(255, 255, 255, 0);
    color: rgb(255, 255, 255);
}

header .line {
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    width: 0.08vw;
    height: 6vh;
    margin-left: 1vw;
    margin-right: 1vw;
    background-color: #ffffff;
}

header .brand {
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    font-size: 3.8vh;
    letter-spacing: 0.5vw;
    /*用于控制字符间的空白间隔*/
    line-height: 8vh;
    color: #ffffff;
}

header .time {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    /*加粗*/
    flex-shrink: 0;
    /*防止项目在空间不足时缩小*/
    font-size: 1.3vw;
    text-align: center;
    margin-left: 2.5vw;
    background-color: rgba(255, 255, 255, 0);
    color: rgb(255, 255, 255);
}

.main {
    display: flex;
    /*弹性布局或 Flexbox 布局。它提供了一种灵活的方式来控制容器中子元素的位置、大小和排列方式。通过 flex-direction 属性可以改变主轴的方向（默认是水平方向）*/
    /*main占据全屏宽度*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.wrapper {
    flex-basis: 35%;
    /*元素在主轴方向上占据父容器的 35% 的空间。*/
    flex-shrink: 0;
    /*该值表示元素不会缩小，即使有剩余的空间，也不会让其他元素进行缩放。如果将该值设置为默认值 1，则表示元素将根据需要收缩。*/
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    min-height: 100%;
    padding: 5vw 0.8vw;
    /* background: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%); */
}

#login {
    border-radius: 8px 8px 8px 8px;
    width: 92%;
    height: 62%;
    max-width: 335px;
    /*最大宽度*/
    background: #ffffff;
    position: relative;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
    z-index: 10;
    padding: 0 20px;
}

@keyframes spinner {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(359deg);
    }
}

.state {
    font-size: 1.5em;
}

footer {
    position: fixed;
    bottom: 12vh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    text-align: center;
    color: #ddd;
    font-weight: normal;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    font-size: 1em;
}

footer a, footer a:link {
    color: #fff;
    text-decoration: none;
}

#login {
    width: 100%;
    height: 52%;
    margin: 0px;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
}

.login--title-img {
    width: 40px;
    height: 40px;
}

.login-title-text {
    font-size: 30px;
    font-weight: 700;
    color: #009CFA;
}

.login-content {
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.div-tab-title {

    width: 274px;
    display: flex;
    justify-content: space-between;
}

.login-btn {
    width: 100%;
}

.tip {
    color: #009CFA;
    text-align: right;
    padding: 0 0 15px 0;
}

.tip span {
    cursor: pointer;
}

.findpassword-form-item {
    display: flex;
    width: 100%;
}

.findpassword input {
    width: 100%;
}

.findpassword .layui-form-label {
    width: 80px;
}

.findpassword .code-btn {
    margin-left: 20px;
    background-color: white;
}

.findpassword-btn {
    width: 150px;
}

.findpassword .foot-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.save-tip {
    color: #009CFA;
    font-size: 10px;
}

/* 对layui的修改 */
.login-class .layui-tab-brief > .layui-tab-title .layui-this {
    color: #009CFA;
}

.login-class .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after {
    border: none;
    border-radius: 0;
    border-bottom: 2px solid #009CFA;
}

.login-class .layui-input {
    border: none;
}

.login-class .layui-form-item .layui-input-inline {
    width: 94%;
    display: flex;
    height: 38px;
    line-height: 38px;
    padding: 0px 10px;
    background-color: #fff;
}

.login-class .layui-form-item .layui-input-inline-code {
    /* width: 94%; */
    display: flex;
    justify-content: space-between;

}

.login-class .layui-form-item .layui-input-inline-code-input {
    display: flex;
    height: 38px;
    line-height: 38px;
    padding: 0px 10px;
    background-color: #fff;
}

.login-code-btn {
    background-color: #fff;
}

.login-class .layui-tab-content {
    padding: 15px 0 0 0;
}